<template>
  <!--el-menu 是菜单容器-->
  <!--
      router 属性:
      让menu支持 vue-router
      不在需要 select 事件
      当点击时，自动跳转到 index 上的值对应的页面
  -->
  <el-menu
    :default-active="$route.path"
    @select="handleSelect"
    router
  >
  <!-- 改下bug。这个直接去参数就好了  path的参数就行了。项目的话先做出大概，后期然后慢慢修bug -->
    <!--el-menu-item 是菜单的项-->
    <el-menu-item index="/admin/bannerlist">
      <el-icon>
        <Calendar />
      </el-icon>
      <template #title>
        轮播图管理
      </template>
    </el-menu-item>
    <!--el-sub-menu 是内嵌子菜单-->
    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <Calendar />
        </el-icon>
        <!--菜单2 需要用 元素包起来，否则折叠的时候折叠不起来-->
        <span>菜单2</span>
      </template>
      <!--el-menu-item-group 用来放 子菜单的项-->
      <el-menu-item-group>
        <el-menu-item index="2-1">
          <el-icon>
            <Calendar />
          </el-icon>
          <template #title>菜单2-1</template>
        </el-menu-item>
        <el-menu-item index="2-2">
          <el-icon>
            <Calendar />
          </el-icon>
          <template #title>菜单2-2</template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="/admin/editor">
      <el-icon>
        <Calendar />
      </el-icon>
      <template #title>
        富文本编辑器
      </template>
    </el-menu-item>
    <el-menu-item index="/admin/menulist">
      <el-icon>
        <Calendar />
      </el-icon>
      <template #title>
        表格
      </template>
    </el-menu-item>
        <el-menu-item index="/admin/echarts">
      <el-icon>
        <Calendar />
      </el-icon>
      <template #title>
      echarts图表
      </template>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      menuIndex: '/admin/bannerlist'
    }
  },
  methods: {
    handleSelect(index) {
      // 菜单选中事件
      // 参数 index 对应选中项的 index 属性
      // console.log(index)
    }
  }
}
</script>
